地图产品设计福音！Mapbox 组件加入 Framer X 原型设计工具 | 附教程

Mapbox × Framer X

相信很多设计师对 Framer X 都不陌生，是一款功能全面使用灵活的原型设计工具，对前端工程师和交互设计师都很友好~ Framer X 的一大优势就在于它强大的组件库，不仅有官方提供的基础流行 UI 组件，更有各大知名公司将他们的官方组件库接入进来，如 Youtube, Twitter, Dropbox, Facebook 等。

现在，Mapbox 也正式接入了他们的地图组件，让你的 App 可以自由调动世界地图。

如果你要设计基于地理位置的产品或 App，那使用 Mapbox 新上线的组件，无需代码就可以轻松实现。Framer X 已经将这款组件上架到了自己的 Store 中。

1. 地图样式16+，可定制化程度高

数了一下，大概有16种快速、可以交互的地图样式供人们选择，从用于导航，户外，数据可视化的一般用途地图到图库中的设计师风格等等。

其实你也可以自己做符合品牌风格的地图样式，这个时候就要推荐大家先来使用Mapbox Studio, 就像这篇教程《如何根据不同的品牌风格制作底图？》里讲的那样，你可以用Cartogram插件，上传自己的品牌logo，直接生成心仪的地图样式，具体就不在这里赘述了。

2. 支持24+全球城市，缩放灵活

Mapbox组件还为您的地图提供了24个主要城市。 您还可以将地图置于任何商家，街道地址，社区或城市的中心位置。

在Framer X预览状态下，就可以对地图进行很自由的缩放、平抑、倾斜，并且是实时的，直接在原型中测试外观，感觉和用户行为。

⌚️

手把手教程时间！

接下来，图图将教你如何在 Framer X 中使用 Mapbox 组件创建一个功能性强、数据丰富的地图原型产品。

准备工作

① 注册 Mapbox 账号并获取访问令牌：

您可以在 mapbox.com/signup 网页上注册 Mapbox 账号，并在“我的账号”页面获取访问令牌；

② 注册 Framer 账号：

 您需要在您的电脑上安装 Framer X，并且熟悉 Framer X 的操作。

创建新样式

Framer X 的 Mapbox 组件库中提供了很多 Mapbox 主要的地图样式以及设计师设计的地图样式。此外，您还可以使用 Mapbox 的即时创建工具 “Cartogram” 自己设计一款独特的地图样式。

① 选择一张图片作为您地图样式的底图；

② 将您选择的图片拖拽进 Cartogram 左下角的面板；

③ 调整 Cartogram 自动选择的色调，您可以调整色相、明暗度等属性，或者选择“自定义”模式直接选择需要的颜色；

④ Cargogram 在您的 Mapbox 账号内保存新的地图样式。下一步，打开 Framer X.

添加 Mapbox 组件

如果您对 Framer X 还很陌生，可以参考 Framer X 的相关文档。

① 在 Framer X 中点击商店 “Store” 图标；

② 在搜索栏中输入 “Mapbox” 搜索；

③ 选择 Mapbox 组件，并点击安装 “Install”；

④ Mapbox 组件下载好后，点击工具 “Tools” 图标；

⑤ 点击 “Frame” 按钮（快捷键 F）为你的项目添加新的框架。本教程中以 Apple IPhone 8 Plus 作为预设尺寸。你可以从右侧列表中选择任意以希望的尺寸，或者自定义拉一个你觉得合适的大小；

⑥ 点击组件 “Components” 图标；

⑦ 在 Mapbox 标题下有一个灰色的盒子，这就是 Mapbox 的组件。点击并拖拽进你新创建的框架中即可添加；

⑧ 新添加的 Mapbox 地图可以在框架内任意改变大小和位置。

改变默认地图样式为您设计的地图样式

Mapbox 组件中已经给了很多的预设样式，您可以自由选择。本教程依旧以在 “Cartogram” 中自行创建地图样式为例。

① 在 Framer X 中点击地图样式 “Map Style”拓展菜单，选择自定义 “Custom”；

② 回到您的 Mapbox Studio 页面，并找到您之前创建的地图样式；

③ 新地图样式默认是私密可见，如果您想要在 Framer X 中公开使用需要设置为“公开可见”。点击 “Menu” 按钮，并在旁边的菜单中找到公开可见 “Make Public”；

④ 设置完成后，点击样式旁边的分享与使用 “Share & use” 按钮；

⑤ 点击切换到使用 “Use” 标签；

⑥ 下拉，并复制您的访问令牌 “access token”；

⑦ 在 Framer X 中的 “Access Token” 文本框中粘贴刚刚复制的令牌；

⑧ 回到 Mapbox 并复制您的样式 URL;

⑨ 回到 Framer X ，在地图样式 “Map Style” 属性中选择 “Custom” 并粘贴 URL.

然后，Framer X 中的地图将更新为您刚刚创建的新的地图样式。

更新地图位置

同地图样式一样，Mapbox 组件会自动预设一些地点供设计师们在原型中使用。如果您想自己自定义位置，那就继续跟着本教程看看吧~

① 点击位置 “Location”旁的自定义 “Custom”标签；

② 使用 Mapbox Search Playground 确定你想要设定的地点的坐标。将坐标输入在搜索栏里，结果将在地图上以红点表示。点击标记点，该位置的经纬度信息就会显示在搜索栏里。本教程是以巴塞罗那作为主视图，巴塞罗那的经纬度坐标是 2.176466902110292,41.38267342902182 ，前一个数字是经度，后一个数字是纬度；

③ 将经纬度值复制粘贴进相应的文本框；

④ 选择倍率 “Zoom” 滑块设置合适的倍率，本教程将倍率设置为11.

大功告成

恭喜啦！！到这一步你就完全设置好 Mapbox 组件了！您可以继续在 Framer X 中添加其他您想要的元素~

下一步

想要了解更多关于如何设计一款夺人眼球的地图样式可以浏览 Mapbox 的 Mapbox Studio 手册，您也可以在 Mapbox 样式长廊中找寻灵感！

期待未来 Mapbox 在 Framer X 上线更多功能！

👀相关阅读

您还可以在下面的渠道持续关注我们哦。

微博

@Mapbox地图数据平台，或者tag #mapbox# 

知乎

@Mapbox中国